<script setup lang="ts">
import { PropType } from 'vue';
import {DetailConfig} from "@/components/crud/types";

// 定义组件的 props
const props = defineProps({
  value: {
    type: Object as PropType<Record<string, any>>,
    required: true
  },
  // 详情项配置，包含字段名和显示标签
  options: {
    type: Array as PropType<DetailConfig[]>,
    default: () => []
  },
  // 描述列表的列数，默认为 3
  column: {
    type: Number,
    default: 3
  },
  // 是否显示边框，默认为 true
  border: {
    type: Boolean,
    default: true
  }
});
</script>

<template>
  <el-descriptions :column="column" :border="border">
    <el-descriptions-item
        v-for="option in options"
        :key="option.field"
        :label="option.title"
    >
      <template v-if="option.component">
        <component
            :is="option.component.name"
            :value="value[option.field]"
            v-bind="option.component.attrs" />
      </template>
      <template v-else>
        {{ value[option.field] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>
/* 可根据需要添加额外样式 */
</style>
